<template lang="">
    <div class="situation-box">
        <p>点击<span class="strong">右侧教师列表</span>即可按照教师分析问卷数据</p>
        <div class="situation">
            <div class="text-center">
                正在查看关于
            </div>
            <div class="title text-center" v-show="showingTeachers">
                教师 <span class="strong">{{teacher.teaName}}</span>
                <p v-if="selectCourse">课程<span class="strong">{{course.quedataCourse}}</span></p>
                的问卷结果
            </div>
            <div class="title text-center" v-show="!showingTeachers">
                <span class="strong">还没有选择教师/课程</span> <br> 请先在右侧选择 
            </div>
        </div>
        <div class="box-center ">
            <el-button type="primary" plain @click="selectAll">清空选择</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'ShowSituation',
        data() {
            return {
                showingTeachers: false,
                selectCourse: false,
                teacher: {/* 
                    "teaNum": 200021,
                    "teaName": "孙悟空"
                 */},
                course: {

                }
            }
        },
        methods: {
            selectAll() {
                this.$bus.$emit('selectAll')
                this.showingTeachers = false
                this.selectCourse = false
            }
        },
        mounted() {
            this.$bus.$on('teacherShowing', (teacher) => {
                console.log(teacher);
                this.teacher = teacher
                this.showingTeachers = true
                this.selectCourse = false
            })
            this.$bus.$on('courseShowing', (course) => {
                this.course = course
                this.selectCourse = true
            })
        },
        beforeDestroy() {
            this.$bus.$off('teacherShowing')
            this.$bus.$off('courseShowing')
        },
    }
</script>
<style scoped>
    .strong {
        color: #409EFF;
    }

    .situation {
        border-bottom: 1px solid #909399;
        border-top: 1px solid #909399;
        padding-top: 10px;
    }

    .situation-box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
    }
</style>